<template>
  <div id="Course" v-loading="loading">
    <div v-if="hasClass" class="main-contianer flex-row">
      <div class="lesson-info">
        <div class="top-info flex-row">
          <img :src="lessonInfo.picUrl" class="info-img" />
          <div class="right-info flex-col">
            <span class="name ellipsis">{{ lessonInfo.lessonName }}</span>
            <span>建议：{{ lessonInfo.studyTime }}课时</span>
            <span>{{ lessonInfo.studyPeopleNum }}人学过</span>
            <el-button type="primary" plain size="small" @click="getClassResource()">更换课程</el-button>
          </div>
        </div>
        <div class="info-title">适用人群</div>
        <div class="info-text">{{ lessonInfo.lessonOtherInfo }}</div>
        <div class="info-title">课程简介</div>
        <div class="info-text">{{ lessonInfo.lessonContent }}</div>
        <div class="info-title">讲师</div>
        <div class="info-teacher flex-row">
          <img :src="lessonInfo.picUrl" class="teacher-img" />
          <div class="teacher-info">
            <div class="name ellipsis">{{ lessonInfo.chiefCompiler }}</div>
            <div class="pro">{{ lessonInfo.chiefCompilerDesc }}</div>
          </div>
        </div>
      </div>
      <div class="right-content">
        <div class="right-top flex-row">
          <img src="~@/assets/images/kc_kcxx@2x.png" @click="goUrl('/student/course/study')" />
          <img src="~@/assets/images/kc_kcrw@2x.png" @click="goUrl('/student/course/task')" />
          <img src="~@/assets/images/kc_zxkt@2x.png" @click="goUrl('/student/course/onlineLesson')" />
          <img src="~@/assets/images/kc_kckh@2x.png" @click="goUrl('/student/course/examine')" />
          <img src="~@/assets/images/kc_xxfx@2x.png" @click="goUrl('/student/course/analyse')" />
        </div>
        <!-- <div class="bottom">
          <h3>学习时间</h3>
          <div class="title" style="display:flex;">
            <div style="flex:1;">今日课程学习时长：1‘12</div>
            <div style="flex:1;">班级课程学习平均时长：2‘35</div>
            <div style="flex:1;"></div>
          </div>
          <div id="chart_example" style="clear:both"></div>
        </div> -->
        <div class="main-right">
          <div class="title flex-row">
            <div class="title-left">学习动态</div>
            <div class="title-right">查看更多</div>
          </div>
          <ul v-if="trendsList.length > 0">
            <li v-for="(item, index) in trendsList" :key="index" class="flex-row">
              <div class="name">【课程学习】</div>
              <div class="time ellipsis">{{item.name}} {{item.createdTime}} 完成</div>
              <div class="lesson-title ellipsis">{{item.trendsTypeName}}</div>
            </li>
          </ul>
          <div v-else class="g-no-data">暂无动态</div>
        </div>
      </div>
    </div>
    <NoList @updateLesson="getLessonId" v-else/>

    <el-dialog title="课程选择" :visible.sync="classListVisible">
      <el-table :data="classList">
        <!-- <el-table-column property="classId" label="班级id" width="150"></el-table-column> -->
        <el-table-column property="className" label="班级名称" width="200"></el-table-column>
        <!-- <el-table-column property="classResourceLessonName" label="班级课程名称"></el-table-column> -->
        <!-- <el-table-column property="resourceLessonId" label="课程id"></el-table-column> -->
        <el-table-column property="resourceLessonName" label="课程名称"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleChoose(scope.row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

  </div>
</template>

<script>
import NoList from '@/views/student/components/NoList'
import { getClassResource } from '@/api/overall'
import { getLessonId, main } from '@/api/student/lesson/index'
import { lessonInfo } from '@/api/student/index'
// const echarts = require('echarts')
import { setClassId, setResourceLessonId } from '@/utils/auth'

export default {
  name: 'Course',
  components: {
    NoList
  },
  data () {
    return {
      trendsList: [],
      hasClass: false,
      lessonId: '',
      lessonInfo: {},
      loading: true,
      classListVisible: false,
      classList: []
      // option: {
      //   legend: {
      //     data: ['今日课程学习时长', '班级课程平均学习时长'],
      //     right: 0,
      //     orient: 'vertical'
      //   },
      //   xAxis: {
      //     type: 'category',
      //     data: ['1', '2', '3', '4', '5', '6', '7']
      //   },
      //   yAxis: {
      //     type: 'value'
      //   },
      //   series: [
      //     {
      //       name: '今日课程学习时长',
      //       type: 'line',
      //       itemStyle: {
      //         normal: {
      //           color: '#009CF6',
      //           lineStyle: {
      //             color: '#009CF6'
      //           }
      //         }
      //       },
      //       data: [1.1, 1.5, 2, 1.4, 2.5, 3, 3.5, 1.2, 2.2, 1]
      //     },
      //     {
      //       name: '班级课程平均学习时长',
      //       type: 'line',
      //       itemStyle: {
      //         normal: {
      //           color: '#F86F33',
      //           lineStyle: {
      //             color: '#F86F33'
      //           }
      //         }
      //       },
      //       data: [1.8, 2.4, 3.3, 3.0, 2.8, 2.7, 1.5]
      //     }
      //   ]
      // }
    }
  },
  mounted () {
    this.getLessonId()
  },
  methods: {
    // 获取课程id 判断是否已加入课程
    async getLessonId () {
      this.loading = true
      const res = await getLessonId()
      if (res.code === '200') {
        this.hasClass = res.data.hasClass
        this.lessonId = res.data.lessonId || ''
        if (this.hasClass && this.lessonId) {
          this.getLessonInfo()
          this.getMain()
          // this.initChart()
        }
      } else {
        this.$message.error(res.message)
      }
      this.loading = false
    },
    async getLessonInfo () {
      const res = await lessonInfo({
        lessonId: this.lessonId
      })
      if (res.code === '200') {
        this.lessonInfo = res.data
      } else {
        this.$message.error(res.message)
      }
    },
    goUrl (url) {
      this.$router.push(url)
    },
    // initChart () {
    //   this.$nextTick(() => {
    //     console.log(document.getElementById('chart_example'))
    //     let myChart = echarts.init(document.getElementById('chart_example'))
    //     myChart.setOption(this.option)
    //     // 建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
    //     window.addEventListener('resize', function () {
    //       myChart.resize()
    //     })
    //   })
    // },
    async getMain () {
      const res = await main({
        lessonType: '1'
      })
      if (res.code === '200') {
        this.trendsList = res.data.trendsList
      } else {
        this.$message.error(res.message)
      }
    },
    async getClassResource () {
      const res = await getClassResource()
      if (res.code === '200') {
        this.classList = res.data
        this.classListVisible = true
      } else {
        this.$message.error(res.message)
      }
    },
    handleChoose (data) {
      setClassId(data.classId)
      setResourceLessonId(data.resourceLessonId)
      this.classListVisible = false
      this.getLessonId()
    }
  }
}
</script>

<style scoped lang="scss" rel="stylesheet/scss">
#Course {
  .main-contianer {
    align-items: flex-start;
  }
  .lesson-info {
    width: 452px;
    padding: 20px;
    box-sizing: border-box;
    height:795px;
    background: #ffffff;
    border: 1px solid rgba(229, 229, 229, 1);
    border-radius: 5px;
    .top-info {
      padding-bottom: 20px;
      border-bottom: 1px solid #E5E5E5;
      .info-img {
        width: 200px;
        height: 118px;
      }
    }
    .right-info {
      height: 118px;
      align-items: flex-end;

      span {
        color: #101D37;
        opacity:0.6;
        font-size:14px;
      }
      .name {
        width:200px;
        font-size:22px;
        font-weight:bold;
        color:rgba(16,29,55,1);
        opacity: 1;

      }
    }
    .info-title {
      font-size:18px;
      color:rgba(16,29,55,1);
      margin: 20px 0;
      display: inline-flex;
      &::before {
        content: '';
        border-radius:2px;
        border-left: 4px solid #009CF6;
        margin-right: 5px;
      }
    }
    .info-text {
      font-size:14px;
      font-weight:500;
      color:rgba(16,29,55,1);
      line-height:24px;
      font-family:PingFang SC;
    }
    .info-teacher {
      .teacher-img {
        width:80px;
        height:80px;
        border-radius:10px;
        margin-right: 13px;
      }
      .teacher-info {
        .name {
          font-size:18px;
          font-family:PingFang SC;
          font-weight:500;
          margin-bottom: 13px;
          color:rgba(16,29,55,1);
        }
        .pro {
          font-size:14px;
          font-family:PingFang SC;
          font-weight:500;
          color:rgba(16,29,55,1);
          line-height:18px;
          opacity:0.6;
        }
      }
    }
  }
  .right-content {
    width: 728px;
    height: 605px;
    .right-top {
      width: 100%;
      height: 168px;
      background: rgba(255, 255, 255, 1);
      border: 1px solid rgba(229, 229, 229, 1);
      border-radius: 5px;
      justify-content: flex-start;
      img {
        width: 120px;
        height: 116px;
        margin-left: 20px;
        cursor: pointer;
      }
    }
    // .bottom {
    //   background: rgba(255, 255, 255, 1);
    //   border: 1px solid rgba(229, 229, 229, 1);
    //   border-radius: 5px;
    //   margin-top: 20px;
    //   padding: 20px;
    //   #chart_example {
    //     width: 90%;
    //     height: 490px;
    //     margin: 0 auto;
    //   }
    //   .title {
    //     font-size: 16px;
    //     font-weight: 500;
    //     color: rgba(16, 29, 55, 1);
    //     line-height: 52px;
    //   }
    // }
     .main-right {
      width: 729px;
      height: 605px;
      margin-top: 20px;
      background: rgba(255, 255, 255, 1);
      border: 1px solid rgba(229, 229, 229, 1);
      border-radius: 5px;
      float: right;
      box-sizing: border-box;
      .title {
        margin-top: 30px;
        padding: 0 20px;
        .title-left {
          font-weight: 500;
          font-size: 24px;
          color: rgba(16, 29, 55, 1);
        }
        .title-right {
          font-size: 14px;
          font-weight: 500;
          color: #009cf6;
          cursor: pointer;
          margin-top: 10px;
        }
        .title-right:hover {
          color: rgba(16, 29, 55, 1);
          opacity: 0.3;
        }
      }
      ul {
        list-style: none;
        margin-top: 20px;
        height: 517px;
        overflow: auto;
        padding: 0 20px;
        li {
          font-size: 16px;
          font-weight: 500;
          color: rgba(16, 29, 55, 1);
          line-height: 24px;
          margin-bottom: 20px;
          overflow: hidden;
          .name {
            font-size: 16px;
            font-weight: 500;
            color: #5a74a6;
            line-height: 24px;
            cursor: pointer;
            width: 15%;
          }
          .time {
            width: 40%;
            color: #101D37;
          }
          .lesson-title {
            width: 40%;
          }
        }
      }
    }
  }
}
</style>
